<template>
	<s-layout title="订单详情">
		<view class="user-card">
			<view class="top">
				<view>
					{{state.detail.username}}：{{state.detail.tel}}
				</view>
				<view class="address-box">
					<uni-icons type="location-filled" size="19" color="#fff" />
					<view class="address">
						{{state.detail.address}}
					</view>
				</view>
			</view>
			<view class="bottom">
				<button class="ss-reset-button" @click="contact(state.detail.tel)">
					联系收货人
				</button>
				<button class="ss-reset-button" @click="copyAddr(state.detail.address)">
					复制地址
				</button>
			</view>
		</view>
		<view class="card">
			<view class="goods-box" v-for="item in state.detail.goods" :key="item.id">
				<img :src="sheep.$url.cdn(item.goods_image)" alt="" class="goods-img" />
				<view class="info">
					<view class="title">
						{{item.goods_title}}
					</view>
					<view>
						规格：{{item.goods_sku_text}}
					</view>
					<view class="quantity">
						<text>×{{item.goods_num}}</text>
						<text class="price">￥{{item.pay_fee}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="card order-info">
			<view>
				<text>订单编号：</text>
				<view class="result">{{state.detail.orderNum}}</view>
			</view>
			<view>
				<text>支付方式：</text>
				<view class="result">{{state.detail.paymentType}}</view>
			</view>
			<view>
				<text>支付时间：</text>
				<view class="result">{{state.detail.paymentTime}}</view>
			</view>
			<view>
				<text>创建时间：</text>
				<view class="result">{{state.detail.createtime}}</view>
			</view>
		</view>
		<su-fixed bottom placeholder bg="bg-white">
			<view class="foot_box ss-flex ss-col-center ss-row-between">
				<!-- <button class="ss-reset-button contcat-btn" @tap="">更多</button> -->
				<view class="ss-flex">
					<button class="ss-reset-button gray-btn" @tap="remark(state.detail.id)">备注</button>
					<button class="ss-reset-button sub-btn" @tap="dispatch(state.detail)">发货</button>
				</view>
			</view>
		</su-fixed>
        
        <!--备注弹窗-->
        <su-popup :show="state.showRemarkPop" position="bottom" round="10" showClose="true" @close="closeRemark">
          <view class="popup">
            <view class="title">备注</view>
            <textarea v-model="state.remarkInfo.memo" placeholder="请输入备注信息" class="textarea"></textarea>
            <view class="btns">
              <button class="ss-reset-button" @tap="closeRemark">取消</button>
              <button class="ss-reset-button sub-btn" @tap="submitRemark">确认</button>
            </view>
          </view>
        </su-popup>
        
        <!--发货弹窗-->
        <su-popup :show="state.showDispatchPop" position="bottom" round="10" showClose="true" @close="closeDispatch">
          <view class="popup">
            <view class="title">发货</view>
            <uni-list class="list">
            	<uni-data-checkbox v-model="state.dispatchInfo.method" :localdata="state.statusList"></uni-data-checkbox>
            </uni-list>
            <template v-if="'input' === state.dispatchInfo.method">
                <view class="title">快递名称</view>
                <input v-model="state.express.name" placeholder="请输入快递名称" class="input"></input>
                <view class="title">快递单号</view>
                <input v-model="state.express.no" placeholder="请输入快递单号" class="input"></input>
                <view class="title">快递代码</view>
                <input v-model="state.express.code" placeholder="请输入快递代码" class="input"></input>
            </template>
            <view class="btns">
              <button class="ss-reset-button" @tap="closeDispatch">取消</button>
              <button class="ss-reset-button sub-btn" @tap="submitDispatch">确认</button>
            </view>
          </view>
        </su-popup>
	</s-layout>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import sheep from '@/sheep';
    import tools from '@/sheep/helper/tools';
    import {copyText} from '@/sheep/helper/index';

	const state = reactive({
		detail: {
			id: 1,
			username: "",
			tel: "",
			address: "",
			orderNum: "",
			createtime: "",
			paymentType: "",
			paymentTime: "",
			goods: [],
		},
        // 备注
        showRemarkPop: false,
        remarkInfo: {
          id: 0,
          memo: ""
        },
        // 发货
        showDispatchPop: false,
        dispatchInfo: {
          order_id: 0,
          actiontype: "",
          method: "",
          order_item_ids: [],
          express: {}
        },
        express: {
            name: '',
            no: '',
            code: ''
        },
        statusList: [{
        	text: '一键发货',
        	value: 'api'
        }, {
        	text: '物流快递',
        	value: 'input'
        }]
	})

	async function getDetail(id) {
        const res = await sheep.$mapi.order.orderDetail(id);
        console.log('detail', res)
        if(res.code === 1){
            const infoData = res.data
            const {consignee,mobile,province_name,city_name,district_name,address} = infoData.address
            state.detail.id = infoData.id
            state.detail.username = consignee
            state.detail.tel = mobile
            state.detail.address = `${province_name}${city_name}${district_name}${address}`
            state.detail.orderNum = infoData.order_sn
            state.detail.createtime = infoData.createtime
            state.detail.paymentType = infoData.pay_mode
            state.detail.paymentTime = infoData.paid_time
            state.detail.goods = infoData.items
        }
	}

	onLoad((options) => {
		getDetail(options.id)
	});
    
    function contact(phone){
        tools.callPhone(phone)
    }
    
    function copyAddr(addr){
        copyText(addr)
    }
    
    function remark(id){
      state.showRemarkPop = true;
      state.remarkInfo.id = id;
    }
    
    function closeRemark(){
      state.remarkInfo = {
        id: 0,
        memo: ""
      };
      state.showRemarkPop = false;
    }
    
    async function submitRemark(){
      const res = await sheep.$mapi.order.orderRemark(state.remarkInfo);
      if(res.code === 1){
        uni.showToast({
          title: '备注成功',
          icon: 'success'
        });
        closeRemark();
      }
    }
    
    function dispatch(item){
      state.showDispatchPop = true;
      state.dispatchInfo.order_id = item.id;
      let item_ids = [];
      const itemData = item.goods;
      itemData.forEach(item => {
          item_ids.push(item.id)
      })
      state.dispatchInfo.order_item_ids = item_ids
    }
    
    function closeDispatch(){
      state.dispatchInfo = {
        order_id: 0,
        actiontype: "",
        method: "",
        order_item_ids: [],
        express: {}
      };
      state.showDispatchPop = false;
    }
    
    async function submitDispatch(){
      const express = {
          name: [state.express.name],
          no: [state.express.no],
          code: [state.express.code]
      }
      state.dispatchInfo.express = express;
      const res = await sheep.$mapi.order.orderDispatch(state.dispatchInfo);
      if(res.code === 1){
        uni.showToast({
          title: '发货成功',
          icon: 'success'
        });
      }
      closeDispatch();
    }
</script>

<style lang="scss" scoped>
    .popup {
      padding: 28rpx;
      .list {
          margin-bottom: 10px;
          padding: 5px 0;
      }
      .title{
        font-size: 32rpx;
        color: #333333;
        font-weight: 600;
        margin-bottom: 40rpx;
      }
      .input {
          margin-bottom: 40rpx;
          padding: 20rpx;
          font-size: 28rpx;
          color: #333333;
          background: #F7F7F7;
          border-radius: 20rpx;
      }
      .textarea{
        box-sizing: border-box;
        width: 100%;
        height: 400rpx;
        padding: 20rpx;
        font-size: 28rpx;
        color: #333333;
        background: #F7F7F7;
        border-radius: 20rpx;
        margin-bottom: 50rpx;
      }
      .btns{
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        >button{
          width: 48%;
          height: 80rpx;
          font-size: 28rpx;
          color: #333333;
          background: #F7F7F7;
          border-radius: 80rpx;
        }
        .sub-btn  {
          color: #fff;
          background: linear-gradient(90deg, #6780FF 0%, #3A43FF 100%);
        }
      }
    }
	.user-card {
		background: #3A43FF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		color: #fff;
		margin: 28rpx;
		overflow: hidden;

		.top {
			padding: 28rpx;
			font-weight: bold;
			font-size: 28rpx;
			margin-left: 20rpx;

			.address-box {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
			}

			.address {
				font-weight: 300;
				font-size: 28rpx;
				margin-left: 10rpx;
			}
		}

		.bottom {
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-weight: bold;
			font-size: 28rpx;
			color: #3A43FF;
			background-color: #fff;

			>button {
				flex: 1;
				padding: 14rpx;
				text-align: center;

				&:nth-child(2) {
					border-left: 2rpx solid rgba(58, 67, 255, 0.1);
					;
				}
			}
		}
	}

	.card {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 28rpx;
		margin: 28rpx;
	}

	.goods-box {
		display: flex;
		margin-top: 30rpx;
		justify-content: start !important;

		&:first-child {
			margin-top: 0;
		}

		.goods-img {
			width: 156rpx;
			height: 156rpx;
			background: #000000;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-right: 30rpx;
		}

		.info {
			flex: 1;
			height: 156rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-size: 26rpx;
			color: #999999;

			.title {
				font-weight: bold;
				font-size: 30rpx;
				color: #1A1A1A;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/* 这里是超出几行省略 */
				overflow: hidden;
			}

		}

		.quantity {
			display: flex;
			justify-content: space-between;
			align-items: end;
			font-size: 26rpx;
			color: #1A1A1A;
		}

		.price {
			font-weight: 500;
			font-size: 28rpx;
			color: #1A1A1A;
		}

	}

	.order-info {
		>view {
			margin: 14rpx 0;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			color: #999999;

			.result {
				flex: 1;
				margin-left: 20rpx;
				color: #333333;
				text-align: right;
			}
		}
	}

	.foot_box {
		height: 100rpx;
		padding: 0 10rpx;

		button {
			width: 166rpx;
			border-radius: 100rpx;
		}

		.gray-btn {
			background: #F7F7F7;
		}

		.sub-btn {
			background: linear-gradient(90deg, #6780FF 0%, #3A43FF 100%);
			color: #fff;
			margin-left: 12rpx;
		}
	}
</style>
